<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>全局组件和局部组件</title>
  </head>

  <body>
    <div id="app">
      <h1>{{message}}</h1>
      <mycpn></mycpn>
      <cpn></cpn>
    </div>
    <div id="app2">
      <mycpn></mycpn>
      <!--下面无法解析，因为只存在#app里-->
      <cpn></cpn>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      /*
       * 全局组件和局部组件
       * */
      const cpnT = Vue.extend({
        template: `
        <div>我是一个全局模板</div>
        `
      });
      //2.注册组件不能使用驼峰法命名（全局组件）
      Vue.component("mycpn", cpnT);
      const cpn1 = Vue.extend({
        template: `
        <div>我是一个局部变量</div>
        `
      });
      const app1 = new Vue({
        el: "#app",
        data: {
          message: "你好，世界",
        },
        components: {
          /*1.前面为模板名，后面为局部模板对象名
           * 2.局部组件
           * */
          cpn: cpn1,
        }
      })
      const app2 = new Vue({
        el: "#app2",
      })
    </script>
  </body>

</html>